iT邦幫忙

2023 iThome 鐵人賽

DAY 6
0
自我挑戰組

React Clean Code And Unit Tests - 利用測試寫出人類看得懂的React程式系列 第 6

Day 6 - 錯誤處理 (Error Handling) & 測試 (Testing)

  • 分享至 

  • xImage
  •  

例外事件(Exceptions)

不在人類面前出現的哥布林才是好哥布林,但有拋出錯誤的bug才是好bug。
與其透過一個一個的印 log ,不如在一開始覺得有可能出錯的地方就使用例外事件(Exceptions)去處理,最好養成只要程式碼有可能拋出例外,就在開頭加上Try-Catch-Finally的習慣。

try {
  functionThatMightThrow();
} catch (error) {
  console.error(error);
} finally {
	//...
}

在拋出錯誤的時候,也可以使用 console.error 來代替 console.log 讓你的 log 更顯眼

不要忽略失敗的 Promises

當有promises失敗的時候,網頁上的功能或資料會有很大的機率出大事,所以千萬不能忽略失敗的promises

getdata()
  .then(data => {
    functionThatMightThrow(data);
  })
  .catch(error => {
    console.error(error);
		// 或是加入更多 promise 失敗時要觸發的function
		reportError();
  });

測試 (testing)

測試雖然不必要,但他很重要,所以請把他列入必要 ~
尤其是 JavaScript 因為沒有型別的檢查,測試上面更要多下點功夫,當然也可以使用TypeScript,但並不是每個專案都可以無痛轉TS的,不過每個專案都可以無痛地將測試加入,所以請好好的寫測試吧!

我之後也會著重在React 的 unit Test 上面,讓大家了解 React 常用到的測試我自己的寫法是怎樣,也希望大家都可以喜歡以**測試驅動開發(Test Driven Development)**的方式去開發。

一個測試一個概念

如果一個測試裡,測試了超過一個概念,那應該拆開成多個測試。就跟寫function的觀念一樣。
在一個概念裡最小化斷言的數量,一個測試函式只測試一個概念

不好的:

import assert from 'assert';

describe('MakeMomentJSGreatAgain', () => {
  it('handles date boundaries', () => {
    let date;

    date = new MakeMomentJSGreatAgain('1/1/2015');
    date.addDays(30);
    assert.equal('1/31/2015', date);

    date = new MakeMomentJSGreatAgain('2/1/2016');
    date.addDays(28);
    assert.equal('02/29/2016', date);

    date = new MakeMomentJSGreatAgain('2/1/2015');
    date.addDays(28);
    assert.equal('03/01/2015', date);
  });
});

適當的:

import assert from 'assert';

describe('MakeMomentJSGreatAgain', () => {
  it('handles 30-day months', () => {
    const date = new MakeMomentJSGreatAgain('1/1/2015');
    date.addDays(30);
    assert.equal('1/31/2015', date);
  });

  it('handles leap year', () => {
    const date = new MakeMomentJSGreatAgain('2/1/2016');
    date.addDays(28);
    assert.equal('02/29/2016', date);
  });

  it('handles non-leap year', () => {
    const date = new MakeMomentJSGreatAgain('2/1/2015');
    date.addDays(28);
    assert.equal('03/01/2015', date);
  });
});

終於把 Clean Code 的概念介紹的差不多了,從明天開始就是進入實際測試環節拉,感謝看文章的各位,我們一起加油。


上一篇
Day 5 - 函式 (Function) part 2
下一篇
Day 7 - 專案建置 & Jest環境設定
系列文
React Clean Code And Unit Tests - 利用測試寫出人類看得懂的React程式30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言